<template>
  <div class="helpIndetail">
    <div class="helpIndetailDivBg">
      <img src="/static/images/record/helpindetail.png">
    </div>
    <div class="redPacketDivTxt">
      <div v-if="sharestate == '已失效'" class="loseorder">
        <img src="/static/images/goods/orderlose.png">
      </div>
      <div class="redPacketDivTxtTitle">
        <h3 class="sharePersonTitle">分享者</h3>
        <h3 class="helpPersonTitle">帮助者</h3>
      </div>
      <ul class="shareUl">
        <li class="shareLi">
          <div class="leftWard">
            <div class="liBg"><img src="/static/images/record/helps1.png"></div>
            <div class="liTxt" v-if="shareUser[0]">
              <div class="havaIntegral" v-if="shareUser[0].type == '积分券'">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{randomIntegral}}
              </div>
              <div class="activeIntegral" v-if="shareUser[0].type =='线下活动卷'">
                <img src="/static/images/record/ticket.png" >
              </div>
            </div>
          </div>
          <div class="rightWard">
            <div class="liBg"><img src="/static/images/record/helps2.png" ></div>
            <div class="liTxt" v-if="shareUser[0]">
              <dl>
                <dt><img :src="shareUser[0].userHeadUrl"></dt>
                <dd>{{shareUser[0].userName}}</dd>
              </dl>
              <div class="rightIntegral">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{shareUser[0].drawIntegral}}
              </div>
            </div>
          </div>
        </li>
        <li class="shareLi" >
          <div class="leftWard">
            <div class="liBg"><img src="/static/images/record/helps1.png" ></div>
            <div class="liTxt" v-if="shareUser[1]">
              <div class="havaIntegral" v-if="shareUser[1].type == '积分券'">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{randomIntegral}}
              </div>
              <div class="activeIntegral" v-if="shareUser[1].type =='线下活动卷'">
                <img src="/static/images/record/ticket.png" >
              </div>
            </div>
          </div>
          <div class="rightWard">
            <div class="liBg"><img src="/static/images/record/helps3.png" ></div>
            <div class="liTxt" v-if="shareUser[1]">
              <dl>
                <dt><img :src="shareUser[1].userHeadUrl"></dt>
                <dd>{{shareUser[1].userName}}</dd>
              </dl>
              <div class="rightIntegral">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{shareUser[1].drawIntegral}}
              </div>
            </div>
          </div>
        </li>
        <li class="shareLi" >
          <div class="leftWard">
            <div class="liBg"><img src="/static/images/record/helps1.png" ></div>
            <div class="liTxt" v-if="shareUser[2]">
              <div class="havaIntegral" v-if="shareUser[2].type == '积分券'">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{randomIntegral}}
              </div>
              <div class="activeIntegral" v-if="shareUser[2].type =='线下活动卷'">
                <img src="/static/images/record/ticket.png" >
              </div>
            </div>
          </div>
          <div class="rightWard">
            <div class="liBg"><img src="/static/images/record/helps4.png" ></div>
            <div class="liTxt" v-if="shareUser[2]">
              <dl>
                <dt><img :src="shareUser[2].userHeadUrl"></dt>
                <dd>{{shareUser[2].userName}}</dd>
              </dl>
              <div class="rightIntegral">
                <img src="/static/images/record/rmoney.png" style="width:54rpx;height:54rpx;margin-right:5rpx;">
                <span>+</span>{{shareUser[2].drawIntegral}}
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  export default {
    props:{
      sharestate: {
        type: String,
      },
      shareUser: {
        type: Object,
      },
      randomIntegral:{
        type: Number,
      }
    },
  }
</script>
<style scoped>
.helpIndetail{
  margin-left: 5rpx;
  margin-top: -20rpx;
  position: relative;
}
.helpIndetail .helpIndetailDivBg{
  width: 657rpx;
  height: 624rpx;
}
.helpIndetail .helpIndetailDivBg img{
  width: 100%;
  height: 100%;
  display: block;
}
.helpIndetail .loseorder{
  position: absolute;
  top: -3rpx;
  padding: 6rpx 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0.6;
  z-index: 3;
  border-radius: 5rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.helpIndetail .loseorder>img{
  width: 196rpx;
  height: 196rpx;
  display: block;
}
.helpIndetail .redPacketDivTxt{
  position: absolute;
  top: 68rpx;
  width: 100%;
}
.helpIndetail .redPacketDivTxt .redPacketDivTxtTitle{
  display: flex;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  font-size: 30rpx;
  font-weight: bold;
  margin: 0 15rpx 0 12rpx;
}
.helpIndetail .redPacketDivTxt .redPacketDivTxtTitle .sharePersonTitle{
  color: #FB8175;
  flex: 1;
  box-sizing: border-box;
  border-right: 1px solid #c4c9cb;
}
.helpIndetail .redPacketDivTxt .redPacketDivTxtTitle .helpPersonTitle{
  color: #59BFCA;
  flex: 1;
}
.helpIndetail .redPacketDivTxt .shareUl{
  padding: 0 15rpx 0 12rpx;
  position: relative;
}
.helpIndetail .redPacketDivTxt .shareUl>li{
  width: 634rpx;
  height: 146rpx;
  position: relative;
  display: flex;
  margin-bottom: 10rpx;
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard{
  box-sizing: border-box;
  border-right: 1px solid #c4c9cb;
  flex: 1;
  height: 146rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard .liTxt{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard .liTxt .havaIntegral{
  display: flex;
  font-size: 32rpx;
  color: #FB8175
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard .liTxt .activeIntegral{
  width: 175rpx;
  height: 94rpx;
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard .liTxt .activeIntegral img{
  width: 100%;
  height: 100%;
}
.helpIndetail .redPacketDivTxt .shareUl>li .leftWard .liTxt div{
  font-size: 32rpx;
  color: #FB8175;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard{
  box-sizing: border-box;
  border-right: 1px solid #c4c9cb;
  flex: 1;
  height: 146rpx;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt{
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt dl{
  overflow: hidden;
  width: 150rpx;
  margin: 0 10rpx 0 15rpx;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt dl dt{
  width: 67rpx;
  height: 67rpx;
  border-radius: 50%;
  display: block;
  margin: auto;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt dl dt img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt dl dd{
  font-size: 22rpx;
  color: #798283;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.helpIndetail .redPacketDivTxt .shareUl>li .rightWard .liTxt .rightIntegral{
  font-size: 30rpx;
  color: #FB8175;
  display: flex;
  flex: 1;
}

.helpIndetail .redPacketDivTxt .shareUl .liBg{
  width: 316rpx;
  height: 146rpx;
  position: absolute;
  top: 0;
  left:0;
}
.helpIndetail .redPacketDivTxt .shareUl .liBg img{
  width: 100%;
  height: 100%;
}
</style>
